<body>
  <div id="app"></div>
</body>

<script type="module">
  function createRenderer() {
    // 2、patch
    function patch(n1, n2, container) {
      if (!n1) {
        mountElement(n2, container) // 如果 n1 不存在意味挂载，调用 mountElement 完成
      } else {
        console.log('n1存在, 意味需要打补丁，暂时没做到')
      }
    }

    function render(vnode, container) {
      if (vnode) {
        patch(container._vnode, vnode, container)
      } else {
        if (container._vnode) container.innerHTML = ''
      }
      container._vnode = vnode
    }
    return {render}
  }
  // 3、挂载
  function mountElement(vnode, container) {
    const el = document.createElement(vnode.type)
    if (typeof vnode.children === 'string') {
      el.textContent = vnode.children
    }
    container.appendChild(el)
  }

  // 1、数据
  const vnode = {type: 'h1', children: 'hello'}
  const renderer = createRenderer()
  renderer.render(vnode, document.querySelector('#app'))
</script>
